<%--
  Created by IntelliJ IDEA.
  User: kwc13
  Date: 2023-12-6
  Time: 上午 08:09
  To change this template use File | Settings | File Templates.
--%>
<!-- 标记为HTML格式 -->
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page isELIgnored="false" %>
<!-- 设置页面为Chain -->
<html lang="ch">
<head>
    <title>小米商城后台管理</title>
    <!-- 设置地址栏主题背景颜色 -->
    <meta name="theme-color" content="#000000">
    <!-- 页面描述 -->
    <meta name="description" content="页面描述信息">
    <!-- 移动端显示 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 页面Logo -->
    <link rel="shortcut icon" href="http://localhost:8083/resource_packs/images/logo.png">
    <title>小米商城后台管理</title>
    <!-- 设置地址栏主题背景颜色 -->
    <meta name="theme-color" content="#000000">
    <!-- 页面描述 -->
    <meta name="description" content="页面描述信息">
    <!-- 移动端显示 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 页面Logo -->
    <link rel="shortcut icon" href="http://localhost:8083/resource_packs/images/logo.png">
    <!-- CSS -->
    <link href="${pageContext.request.contextPath}/other/style/background/employee.css" rel="stylesheet"
          type="text/css"/>
    <script src="${pageContext.request.contextPath}/other/component/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/other/request/background/administrator_information.js"></script>
    <script src="${pageContext.request.contextPath}/other/request/background/departments.js"></script>
    <script src="${pageContext.request.contextPath}/other/scripts/background/employee.js"></script>
    <script src="${pageContext.request.contextPath}/other/request/background/pagination.js"></script>
</head>
<body>

<div class="head">
    <div class="title">
        <span>员工管理</span>
    </div>

    <div class="search">
        <div class="search-input">
            <label>
                <input type="text" placeholder="请输入员工名称/员工ID">
            </label>
        </div>
        <div class="search-img">
            <img src="http://localhost:8083/resource_packs/images/search_%23fff.png" alt="搜索">
        </div>

    </div>
    <button class="title-management">职称管理</button>
    <button class="recycle"><span>回收站</span>
        <img src="http://localhost:8083/resource_packs/images/trash_can.png" alt="垃圾桶" width="18px">
    </button>
</div>
<div class="other-operate">
    <div class="sift">
        <label for="lang">职称:</label>
        <select name="languages" id="lang">
            <jsp:useBean id="departmentsList" scope="request" type="java.util.List"/>
            <c:forEach var="departments" items="${departmentsList}">
                <option value="${departments.departmentId}">${departments.departmentName}</option>
            </c:forEach>
        </select>
    </div>
    <div class="sift">
        <label for="status">状态:</label>
        <select name="languages" id="status">
            <option value="0">正常</option>
            <option value="1">注销</option>
            <option value="2">冻结</option>
        </select>
    </div>
    <div class="">
        <span class="date">时间:</span>
        <label for="date-flashback"></label>
        <jsp:useBean id="dateEntry" scope="request" type="java.lang.String"/>
        <input type="radio" id="date-flashback" name="drone" value="0" ${dateEntry == 0 ? 'checked' : ''}/>倒序
        <label for="date-positive-order"></label>
        <input type="radio" id="date-positive-order" name="drone" value="1" ${dateEntry == 1 ? 'checked' : ''}/>正序
    </div>
    <div class="sift-button">
        <button class="select">查询</button>
        <button class="insert">新增</button>
    </div>
</div>
<table class="employee-table">
    <tr>
        <th>
            ID
        </th>
        <th>
            姓名
        </th>
        <th>
            职称
        </th>
        <th>
            手机号
        </th>
        <th>
            性别
        </th>
        <th>
            入职日期
        </th>
        <th>
            状态
        </th>
        <th>
            操作
        </th>
    </tr>
    <jsp:useBean id="administratorInformationPage" scope="request" type="com.xm.entity.Page"/>
    <c:forEach var="employee" items="${administratorInformationPage.data}">
        <tr>
            <td class="employee-id">
                    ${employee.informationId}
            </td>
            <td>
                    ${employee.name}
            </td>
            <td>
                <c:if test="${employee.departmentId == 0}">
                    董事长
                </c:if>
                <c:if test="${employee.departmentId == 1}">
                    主管
                </c:if>
                <c:if test="${employee.departmentId == 2}">
                    普通员工
                </c:if>
                <c:if test="${employee.departmentId == 3}">
                    快递员
                </c:if>
                <c:if test="${employee.departmentId == 4}">
                    分拣员
                </c:if>
                <c:if test="${employee.departmentId == 5}">
                    总裁
                </c:if>
            </td>
            <td>
                    ${employee.phone}
            </td>
            <td>
                <c:if test="${employee.sex == 0}">
                    男
                </c:if>
                <c:if test="${employee.sex !=0}">
                    女
                </c:if>
            </td>
            <td>
                    ${employee.dateEntry}
            </td>
            <td>
                <c:if test="${employee.administrator.administratorState == 0}">
                    正常
                </c:if>
                <c:if test="${employee.administrator.administratorState == 1}">
                    注销
                </c:if>
                <c:if test="${employee.administrator.administratorState == 2}">
                    冻结
                </c:if>

            </td>
            <td class="operate">
                <button class="view">查看</button>
                <button class="leave">离职</button>
            </td>
        </tr>
    </c:forEach>
</table>
<div class="pagination-function">
    <ul class="pagination">
        <c:if test="${administratorInformationPage.pageNumber ne 1}">
            <li><a href="?menuId=103&pageNumber=1&pageSize=${administratorInformationPage.pageSize}">首页</a></li>
            <li>
                <a href="?menuId=103&pageNumber=${administratorInformationPage.pageNumber - 1}&pageSize=${administratorInformationPage.pageSize}">上一页</a>
            </li>
        </c:if>

        <c:forEach var="page" begin="1" end="${administratorInformationPage.totalPages}">
            <c:choose>
                <c:when test="${page eq administratorInformationPage.pageNumber}">
                    <li><a href="?menuId=103&pageNumber=${page}&pageSize=${administratorInformationPage.pageSize}"
                           class="active">${page}</a></li>
                </c:when>
                <c:otherwise>
                    <c:if test="${page eq 1 or page eq administratorInformationPage.totalPages or (page ge administratorInformationPage.pageNumber - 2 and page le administratorInformationPage.pageNumber + 2)}">
                        <li>
                            <a href="?menuId=103&pageNumber=${page}&pageSize=${administratorInformationPage.pageSize}">${page}</a>
                        </li>
                    </c:if>
                    <c:if test="${page eq administratorInformationPage.pageNumber - 3}">
                        <li><span>...</span></li>
                    </c:if>
                    <c:if test="${page eq administratorInformationPage.pageNumber + 3}">
                        <li><span>...</span></li>
                    </c:if>
                </c:otherwise>
            </c:choose>
        </c:forEach>

        <c:if test="${administratorInformationPage.pageNumber ne administratorInformationPage.totalPages}">
            <li>
                <a href="?menuId=103&pageNumber=${administratorInformationPage.pageNumber + 1}&pageSize=${administratorInformationPage.pageSize}">下一页</a>
            </li>
            <li>
                <a href="?menuId=103&pageNumber=${administratorInformationPage.totalPages}&pageSize=${administratorInformationPage.pageSize}">尾页</a>
            </li>
        </c:if>
    </ul>
</div>

<!-- 弹窗：查看详情 -->
<div class="window" style="display: none">
    <div class="pop-up-shade-layer"></div>
    <div class="pop-ups">
        <div class="pop-ups-title">
            <span>员工详情</span>
            <img src="http://localhost:8083/resource_packs/images/pop_ups_closes.png"
                 alt="弹窗关闭" class="pop-ups-down">
        </div>
    </div>
</div>

<!-- 弹窗：新增 -->
<div class="add-window" style="display: none">
    <div class="pop-up-shade-layer"></div>
    <div class="pop-ups">
        <div class="pop-ups-title">
            <span>新增员工</span>
            <img src="http://localhost:8083/resource_packs/images/pop_ups_closes.png"
                 alt="弹窗关闭" class="pop-ups-down">
        </div>
        <div class="pop-ups-content">
            <label>
                <div class="row">
                    <span>账号:</span>
                    <input type="text" id="account" placeholder="请输入账号">
                    <a></a>
                </div>
                <div class="row">
                    <span>密码:</span>
                    <input type="text" id="password" placeholder="请输入密码">
                    <a></a>
                </div>
                <div class="row">
                    <span>权限:</span>
                    <div class="row-permissions">
                        <input type="checkbox" value="0" class="permissions" style="display: none" checked>
                        <jsp:useBean id="menuList" scope="request" type="java.util.List"/>
                        <c:forEach var="menu" items="${menuList}">
                            <c:if test="${menu.requiredPermissions != 0}">
                            <span class="permissions-choose" style="width: 90px">
                                <input type="checkbox" class="permissions" value="${menu.requiredPermissions}"
                                       name="permissions">${menu.menuName}
                            </span>
                            </c:if>
                        </c:forEach>
                        <a></a>
                    </div>
                </div>
                <div class="row">
                    <span>名称:</span>
                    <input type="text" id="name" placeholder="请输入名称">
                    <a></a>
                </div>
                <div class="row">
                    <span>手机号:</span>
                    <input type="text" id="phone" placeholder="请输入手机号">
                    <a></a>
                </div>
                <div class="row">
                    <span>邮箱号:</span>
                    <input type="text" id="mailbox" placeholder="请输入邮箱号">
                    <a></a>
                </div>
                <div class="row">
                    <span>备用手机号:</span>
                    <input type="text" id="spare_phone" placeholder="请输入备用手机号">
                    <a></a>
                </div>
                <div class="row">
                    <span>家庭地址:</span>
                    <input type="text" id="home_address" placeholder="请输入家庭地址">
                    <a></a>
                </div>
                <div class="row">
                    <span>联系人:</span>
                    <input type="text" id="contact" placeholder="请输入联系人">
                    <a></a>
                </div>
                <div class="row">
                    <span>联系人手机号:</span>
                    <input type="text" id="contact_phone" placeholder="请输入联系人手机号">
                    <a></a>
                </div>
                <div class="row">
                    <span>签名:</span>
                    <input type="text" id="signature" placeholder="请输入签名">
                    <a></a>
                </div>
                <div class="row">
                    <span>性别:</span>
                    <input type="radio" id="man" name="gender" value="0" checked>男
                    <input type="radio" id="woman" name="gender" value="1">女
                </div>
                <div class="row">
                    <span>头像:</span>
                    <input type="file" id="file" name="upload_image"
                           accept="image/gif, image/jpeg, image/png, image/jpg">
                </div>
                <div class="row">
                    <span>出生日期:</span>
                    <input type="date" id="date_birth">
                    <a></a>
                </div>
                <div class="row">
                    <span><label for="addLang">职称:</label></span>
                    <select name="languages" id="addLang">
                        <c:forEach var="departments" items="${departmentsList}">
                            <option value="${departments.departmentId}">${departments.departmentName}</option>
                        </c:forEach>
                    </select>
                </div>

            </label>
        </div>
        <div class="addButton">
            <button class="cancel">取消</button>
            <button class="new">新增</button>
        </div>
    </div>
</div>


<!-- 弹窗：回收站 -->
<div class="recycle-bin-window" style="display: none">
    <div class="pop-up-shade-layer"></div>
    <div class="pop-ups">
        <div class="pop-ups-title">
            <span>回收站</span>
            <img src="http://localhost:8083/resource_packs/images/pop_ups_closes.png"
                 alt="弹窗关闭" class="pop-ups-down">
        </div>
    </div>
</div>
<!-- 弹窗：职称管理 -->
<div class="bin-window" style="display: none">
    <div class="pop-up-shade-layer"></div>
    <div class="pop-ups">
        <div class="pop-ups-title">
            <span>职称管理</span>
            <img src="http://localhost:8083/resource_packs/images/pop_ups_closes.png"
                 alt="弹窗关闭" class="pop-ups-down">
        </div>
        <div class="table">
            <div class="table-row table-header">
                <div class="table-cell">编号</div>
                <div class="table-cell">职称</div>
                <div class="table-cell">操作</div>
            </div>
            <div class="table-body goods-tbody">

            </div>
        </div>
    </div>
</div>
</body>
</html>
